<script setup lang="ts">

import {useRouter} from "vue-router";
import {onMounted, ref } from "vue";
import Index from "@/views/login/index.vue";

const router = ref(useRouter().currentRoute);

const path = router.value.fullPath;

const loginRef = ref(null);

const openLogin = () =>{
  loginRef.value.openDialog();
}

</script>

<template>
  <div class="common-layout">
    <index ref="loginRef"></index>
    <el-container>
      <el-header>

        <el-menu
            :default-active="path"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            router
        >
          <el-menu-item>七七小说</el-menu-item>
          <div class="flex-grow" />
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/type">分类</el-menu-item>
          <el-menu-item @click="openLogin">登录</el-menu-item>
        </el-menu>

      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>
  </div>
</template>
<style scoped>

.flex-grow {
  flex-grow: 1;
}
</style>